import React, { Component } from 'react'
import { Link } from 'react-router-dom';
// 引入antd的依赖
import { DatePicker } from 'antd';
export default class SongList extends Component {
  constructor() {
    super();
    this.state = {
      songList: [
        {name: '小娟',artist: '谭维维'},
        {name: '小芳',artist: '李荣浩'}
      ],
      banners: []
    }
  }
  componentWillMount() {
    this.$http('http://localhost:3001/api/banner')
      .then(res => {
        console.log(res);
        this.setState({
          banners: res.data.banners
        })
      })
      .catch(err=> {
        console.log(err);
      })
  }
  render() {
    return (
      <div>
        <p>我的歌单</p>
        <ul>
          {this.state.songList.map((item,index)=> {
            return <li key={index}>
              <Link to={'/detail/'+item.name}>{item.name}-{item.artist}</Link>
            </li>
          })}
        </ul>
        <hr />
        <DatePicker />
        {/* {this.state.banners.map((item,index)=> {
          return <img key={'img'+index} src={item.imageUrl} width="100px"/>
        })} */}
      </div>
    )
  }
}
